<template>
    <z-page-title value="物料分类" />
    <el-row :gutter="20">
        <el-col :span="6">
            <z-action 
                label="添加物料分类" 
                type="primary"
                url="/do/put/mate_cate" 
                :fields="['title', 'isLeaf']" 
                title="添加新物料分类"
                @finish="(result) => addFinish(result, node)" />
            
            <el-tree 
                ref="tree" 
                node-key="id" 
                :load="loadNode" 
                highlight-current 
                lazy
                :props="props"
                style="margin-top: 6px">
                
                <template #default="{ data, node }">
                    <span class="custom-tree-node">
                        <span class="title" @click="select(data)">{{ data.title }}</span>
                        <span class="actions">
                            <z-action 
                                icon="plus" 
                                type="text" 
                                :title="'添加' + data.title + '子分类'" 
                                url="/do/put/mate_cate"
                                :data="{ parentId: data.id }" 
                                :fields="['title', 'isLeaf']"
                                v-if="data.isLeaf == 0"
                                @finish="(result) => addFinish(result, node)" />
                            
                            <z-action 
                                icon="edit" 
                                type="text" 
                                :title="'编辑' + data.title" 
                                url="/do/patch/mate_cate" 
                                :data="data" 
                                :fields="['title']"
                                @finish="(result) => edit(result, node)"
                                style="margin-right: 8px" />
                            
                            <z-action 
                                icon="x" 
                                type="text" 
                                url="/api/category/deleteMateCategory" 
                                mode="confirm" 
                                :data="data"
                                :title="'刪除' + data.title" 
                                @finish="(result) => remove(result)" />
                        </span>
                    </span>
                </template>
            </el-tree>
        </el-col>
    </el-row>
</template>

<script>
import configs from './.lowcode/configs';

export default {
    inheritAttrs: false,
    name: 'p-dfvqeknq',
    provide: { configs },
    data() {
        return {
            params: null,
            props: {
                isLeaf: (data) => data.isLeaf === 1
            },
            defaultCategoryId: null,
        }
    },
    async created() {
        this.tenant = $.tenant();
        const { categoryId } = this.$route.query
        if (categoryId) {
            this.defaultCategoryId = categoryId
            this.params = {categoryId }
        }
    },

    methods: {
        select(data) {
            // 仅当是叶子节点时才加载内容
            if (data.isLeaf == 1) {
                this.params = { categoryId: data.id }
                this.$router.push({ query: { categoryId: data.id } })
            }
        },

        async loadNode(node, callback) {
            try {
                const result = await $.get({ 
                    url: "/do/list/mate_cate", 
                    data: { parentId: node.data.id } 
                })
                
                callback(Array.isArray(result) ? result : []);
            } catch (e) {
                console.error("加载分类数据失败", e);
                callback([]);
            }
        },

        async addFinish(result, node) {
            if (node) {
                if (!node.loaded) {
                    node.newChildren = node.newChildren || [];
                    if (!node.newChildren.some(child => child.id === result.id)) {
                        node.newChildren.push(result);
                    }
                } else {
                    const exists = node.childNodes.some(child => child.data.id === result.id);
                    if (!exists) {
                        this.$refs.tree.append(result, node);
                    }
                }
            } else {
                // 处理根节点添加
                this.$refs.tree.append(result)
            }
        },

        edit(result, node) {
            // 更新节点数据
            Object.assign(node.data, result);
        },

        remove(result) {
            this.$refs.tree.remove(result.id);
            // 清理当前选中状态
            if (this.params?.categoryId === result.id) {
                this.params = null;
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    line-height: 32px; 
    align-items: center; 
    justify-content: space-between;
    padding-right: 8px;
}

.title {
    flex: 1;
    cursor: pointer;
}

.actions {
    display: flex;
    
    /* 修正CSS选择器名称 */
    :deep(.z-action-text) {
        margin-left: 8px;
    }
}
</style>